<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.prime.com.tr/ui"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html">
    <body>
        <ui:composition template="../templates/default3.xhtml">  
            <ui:define name="content">
                <h:form id="addAddressForm" binding="#{addressManagerBean.loadAddAddress}">
                    <p:panel header="Add Address" id="addAddress">
                        <p:messages id="error"/>

                        <table width="100%">
                            <tr>
                                <td>
                                    Company:
                                </td>                         
                                <td>
                                    <h:outputText id="company" value="#{addressManagerBean.company}" />
                                    <br/>
                                    <h:outputText id="Type" value="#{addressManagerBean.type}" />
                                </td>
                            </tr>
                            <tr>
                                <td width ="80px" valign="top" > Street:</td>
                                <td width="200px" valign="top">
                                    <table><tr><td><p:inputTextarea id="street" style="width:160px;height:60px;" maxHeight="60" effectDuration="400" value="#{addressManagerBean.street}">
                                                </p:inputTextarea></td><td> <font class="fieldNote">*</font></td></tr></table>
                                </td>
                                <td width="80px">
                                    City: <br/><br/> Country: 
                                </td>
                                <td width="200px">
                                    <p:inputText id="city" value="#{addressManagerBean.city}" >
                                    </p:inputText>
                                    <font class="fieldNote">*</font>

                                    <br/><br/>
                                    <p:inputText id="country" value="#{addressManagerBean.country}">
                                    </p:inputText>
                                    <font class="fieldNote">*</font>
                                </td>
                            </tr>
                            <tr>
                                <td valign ="top" >Postal: </td>
                                <td width="200px" valign ="top"> 
                                    <p:inputText label="Postal" id="postal" value="#{addressManagerBean.postal}" validatorMessage="Postal Code Must Have a Minimum of 4 Digits and Maximum of 8 Digits">
                                        <!-- <f:validateLength minimum="4" maximum="11"/> -->
                                    </p:inputText>
                                    <font class="fieldNote">* Min. 4 , Max. 11</font> 
                                </td>
                            </tr>
                            <tr>
                                <td colspan="5" align="center"><hr/>
                                    <p:commandButton id="btnSaveAdd" value="Add" actionListener="#{addressManagerBean.saveAddress}"  update="addAddressForm" ajax="true" />
                                </td>
                            </tr>
                        </table>
                         
                    </p:panel>
                    <p:panel header="Address book" id="AddressBookPanel">
                        <p:dataTable id="addresses" var="address" value="#{addressManagerBean.addresses}" paginator="false" 
                                     emptyMessage="No address found with given criteria."
                                     selection="#{addressManagerBean.selectedAddress}" selectionMode ="single">
                            <p:column headerText="Street"> 
                                <h:outputText value="#{address.street}" />                                             
                            </p:column> 
                            <p:column headerText="Postal Code"> 
                                <h:outputText value="#{address.postal}" />                                             
                            </p:column> 
                            <p:column headerText="City"> 
                                <h:outputText value="#{address.city}" />                                             
                            </p:column> 
                            <p:column headerText="Country"> 
                                <h:outputText value="#{address.country}" />                                             
                            </p:column> 
                        </p:dataTable>
                        <table class="table-submit">
                            <tr>
                                <td align="center"><hr/>
                                    <p:commandButton id="btnSave" value="Done" actionListener="#{addressManagerBean.doneAddress}"  update="addAddressForm" ajax="true" />
                                    &nbsp;&nbsp;&nbsp;
                                    <p:commandButton value="Remove Address" actionListener="#{addressManagerBean.removeAdddress}" update="error" ajax="true"/>
                                </td>
                            </tr>
                        </table>
                        <p:messages/>
                    </p:panel>
                </h:form>
            </ui:define>
        </ui:composition>
    </body>
</html>